<template>
    <view class="city-select">
        <scroll-view class="city-select_item" :scroll-into-view="currentInitial" scroll-y enable-flex>
            <view :id="group.initial" v-for="group in filteredCityList" :key="group.initial">
                <view class="city-select_initial">
                    <text>{{ group.initial }}</text>
                </view>
                <view class="city-select__list">
                    <view class="city-select__cell" v-for="(city, index) in group.list" :key="index"
                        @click="$emit('onClick', city)">
                        <text>{{ city.name }}</text>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="city-select__sidebar">
            <view class="city-select__index" v-for="group in filteredCityList" :key="group.initial"
                @touchstart.stop.prevent="onTouchMove(group.initial)" @touchend.stop.prevent="onTouchStop"
                @touchcancel.stop.prevent="onTouchStop">
                <span>{{ group.initial }}</span>
            </view>
        </view>

    </view>
</template>

<script>
import cityList from "./city.json";

export default {
    props: {
        search: {
            type: String,
            default: ""
        }
    },

    data() {
        return {
            cityList: [],
            currentInitial: "A", // 当前点击的字母
            isClickInitial: false, // 点击了右边字母
            localSearch: ""
        };
    },

    computed: {
        filteredCityList() {
            if (!this.localSearch.trim()) {
                return this.cityList;
            }

            return this.cityList.filter(group =>
                group.list.some(city =>
                    city.name.toLowerCase().includes(this.localSearch.toLowerCase())
                )
            );
        }
    },

    methods: {
        initCityList() {
            // 如有需要可通过api动态赋值到this.cityList
            this.cityList = cityList;
        },
        onTouchMove(initial) {
            this.currentInitial = initial;
            this.isClickInitial = true;
        },
        onTouchStop() {
            this.isClickInitial = false;
        },
    },

    watch: {
        search(newVal) {
            this.localSearch = newVal;
        }
    },

    mounted() {
        this.initCityList();
    }
};
</script>

<style lang="scss" scoped>
.city-select {
    height: 100%;
    padding-bottom: 50px;

    &_search {
        padding: 10px;

        input {
            width: 90%;
            height: 40px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    }

    &_item {
        width: 100%;
        height: 100%;
        max-height: 100vh;
    }

    &_initial {
        padding: 15rpx 30rpx;
        width: 100%;
        font-size: 28rpx;
        font-weight: 500;
        color: #606266;
        background-color: rgb(245, 245, 245);
    }

    &__list {
        padding: 0 70rpx 0 30rpx;
    }

    &__cell {
        height: 100rpx;
        line-height: 100rpx;
        border-bottom: 1rpx solid #f2f2f2;

        &:last-child {
            border: none;
        }
    }

    &__sidebar {
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 99;
    }

    &__index {
        padding: 10rpx 20rpx;
        font-size: 22rpx;
        font-weight: 500;
        line-height: 1;
    }

    &__alert {
        position: fixed;
        top: 50%;
        right: 90rpx;
        z-index: 99;
        margin-top: -60rpx;
        width: 120rpx;
        height: 120rpx;
        font-size: 50rpx;
        color: #fff;
        border-radius: 24rpx;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>